<template>
  <div class="topics_ranking">
    <h3 class="title">
      <slot></slot>
    </h3>
    <ul>
      <li v-for="(item,index) in rankingData" :key="index">
        <a :href="'/topic/' + item.topicsid">
          <span class="text" :title="item.title">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-chaojihuati'></use>
            </svg>
            {{item.title}}
          </span>
          <span>
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-youlanrenshu'></use>
            </svg>
            <span style="color:gray">{{item.visit}}</span>
          </span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Topicsranking',

  data() {
    return {
  
    };
  },

  props: {
    // 话题排行榜数据集
    rankingData: Array
  },

  methods: {
    
  },
};
</script>

<style scoped>
.topics_ranking{
  background-color: white;
  padding: 10px;
}
.topics_ranking ul{
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}
.topics_ranking ul li{
  display: inline-block;
  font-size: 0.8rem;
  margin: 4px;
  border-bottom: 1px dotted gray;
}
.topics_ranking ul li a{
  display: flex;
  justify-content: space-between;
}
.topics_ranking ul li .text{
  display: inline-block;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  margin: 0 4px;
}
.topics_ranking ul li a:hover .text{
  color: red;
}
</style>